<template>
    <div>
        <div class="wrapper"
        v-for="(item, index) of list"
        :key="index"
        >
            <div class="header">
                详情介绍
                    <div
                    class="iconfont return"
                    @click="handleReturnClick"
                    >&#xe624;</div>
            </div>
            <div class="item-wrapper">
                <div class="item border-bottom">
                    <div class="title border-bottom">入园参考</div>
                        <div class="read-info"
                        v-for="(item1, index) of item.readList"
                        :key="index">
                            <div class="title-son">{{item1.title}}</div>
                            <div
                            class="content">{{item1.text}}</div>
                        </div>
                    </div>
                <div class="item border-bottom">
                    <div class="title">特色玩法</div>
                    <div class="detail"
                    v-for="(item2, index) of item.playList"
                    :key="index"
                    >
                        <img class="img" :src="item2.imgUrl">
                        <p class="detail-title">{{item2.title}}</p>
                        <p class="detail-text">{{item2.text}}</p>
                    </div>
                </div>
                <div class="item border-bottom">
                    <div class="title border-bottom">温馨提示</div>
                    <div class="title-son">小贴士</div>
                    <div class="cue"
                    v-for="(item3, index) of item.cueList"
                    :key="index"
                    >
                        <p class="text">{{item3}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CommonIntroduce',
    props: {
        list: [Array, Object]
    },
    methods: {
        handleReturnClick () {
            this.$emit('close')
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .wrapper
        z-index 99
        position absolute
        top 0
        width 100%
        height auto
        background #fff
        .header
            position fixed
            overflow hidden
            width 100%
            z-index 100
            height $headerHeight
            line-height $headerHeight
            text-align center
            color #fff
            background-color $bgColor
            font-size .32rem
            .iconfont
                position absolute
                top 0
                left 0
                width .64rem
                font-size .4rem
                text-align center
                margin-left .1rem
                color #fff
        .item-wrapper
            padding-top .8rem
            .item
                width 100%
                height auto
                .title
                    height 1rem
                    line-height 1rem
                    font-weight 700
                    padding-left .15rem
                    font-size .29rem
                .title-son
                    font-size .26rem
                    font-weight 700
                    padding .15rem 0 0 .15rem
                .content
                    line-height .4rem
                    padding .15rem .15rem
                    color #888
                .detail
                    width 100%
                    .img
                        width 100%
                        height 4.3rem
                    .detail-title
                        width 100%
                        height .8rem
                        line-height .8rem
                        color #fff
                        text-align center
                        margin-top -.8rem
                    .detail-text
                        line-height .4rem
                        padding .15rem .2rem
                .text
                    line-height .4rem
                    padding .1rem .25rem
                    color #666
</style>
